<template>
  <svg class="connection" :style="connectionStyle">
    <path 
      :d="pathData" 
      :stroke="connection.selected ? '#4299e1' : '#718096'" 
      :stroke-width="connection.selected ? 3 : 2" 
      fill="none"
      @mousedown.stop="handleMouseDown"
    />
  </svg>
</template>

<script>
export default {
  name: 'Connection',
  props: {
    connection: {
      type: Object,
      required: true
    },
    sourceNode: {
      type: Object,
      required: true
    },
    targetNode: {
      type: Object,
      required: true
    }
  },
  computed: {
    startPoint() {
      return {
        x: this.sourceNode.x + this.sourceNode.width,
        y: this.sourceNode.y + this.sourceNode.height / 2
      };
    },
    endPoint() {
      return {
        x: this.targetNode.x,
        y: this.targetNode.y + this.targetNode.height / 2
      };
    },
    pathData() {
      const { x: startX, y: startY } = this.startPoint;
      const { x: endX, y: endY } = this.endPoint;
      const midX = (startX + endX) / 2;
      return `M${startX},${startY} C${midX},${startY} ${midX},${endY} ${endX},${endY}`;
    },
    connectionStyle() {
      return {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        pointerEvents: 'all',
        zIndex: 1
      };
    }
  },
  methods: {
    handleMouseDown() {
      this.$emit('select', this.connection);
    }
  }
};
</script>

<style>
@import '../assets/styles/connection.css';
</style>